<template>
	<view class="content">
		<!-- 上 -->
		<view class="note-manage">
			<!-- <view class="note"  @click="toZuoye">添加备注</view> -->
			<image src="../../static/add-note.png" class="note"  @click="toZuoye"></image>
			<!-- <view class="manage" @click="toOrder">作业管理</view> -->
			<image src="../../static/zy-manage.png" class="manage" @click="toOrder"></image>
		</view>
		<!-- 中 -->
		<view class="tools">
			<view class="tools-top">
				<!-- 店铺管理 -->
				<view class="top">
					<image class="top-img"  src="../../static/dianpu.jpg" @click="toXiaodian"></image>
					<view class="top-text">店铺管理</view>
				</view>
				<!-- 商品管理 -->
				<view class="top" @click="toGoodsManage">
					<image class="top-img" src="../../static/shangpin.jpg"></image>
					<view class="top-text">商品管理</view>
				</view>
				<!-- 订单管理 -->
				<view class="top" @click="toOrder">
					<image class="top-img" src="../../static/dingdan.jpg"></image>
					<view class="top-text">订单管理</view>
				</view>
				<!-- 客户管理 -->
				<view class="top" @click="toCustomerManage">
					<image class="top-img" src="../../static/kehu.jpg"></image>
					<view class="top-text">客户管理</view>
				</view>
			</view>
			<view class="tools-bottom">
				<!-- 营销管理 -->
				<view class="bottom" @click="toYxManage">
					<image class="bottom-img" src="../../static/yingxiao.jpg"></image>
					<view class="bottom-text">营销管理</view>
				</view>
				<!-- 我的数据 -->
				<view class="bottom" @click="toMydata">
					<image class="bottom-img" src="../../static/shujv.jpg"></image>
					<view class="bottom-text">我的数据</view>
				</view>
				<!-- 会员充值 -->
				<view class="bottom" @click="toIndexhuiyuan">
					<image class="bottom-img" src="../../static/huiyuan.jpg"></image>
					<view class="bottom-text">会员充值</view>
				</view>
				<!-- 我的小店 -->
				<view class="bottom" @click="toMyxiaodian">
					<image class="bottom-img" src="../../static/xiaodian.jpg"></image>
					<view class="bottom-text">我的小店</view>
				</view>
				
			</view>
			
		</view>
		<!-- 下 -->
		<view class="data">
			
			<!-- 营业额 -->
			<view class="jine">
				<view class="jine-left">
					<view class="today-number">3000.00</view>
					<view style="color:gray">今日营业额</view>
				</view>
				<view class="jine-right">
					<view class="today-number2">{{pe}}</view>
					<view style="color:gray">未入账金额</view>
				</view>
			</view>
			<!-- 可提现金额 -->
			<view class="tixian" @click="toTixian">
				<image src="../../static/jine.png" class="icon-jine"></image>
				<view class="text">可提现金额</view>
				<view class="text2">{{ktxAmount}}</view>
				<image src="../../static/enter.png" class="icon-enter"></image>
			</view>
			<!-- 我的银行卡 -->
			<!-- <view class="card" @click="toMycard">
				<image src="../../static/card.png"  class="icon-card"></image>
				<view class="text">我的银行卡</view>
				<view class="text2">未绑定</view>
				<image src="../../static/enter.png" class="icon-enter"></image>
			</view> -->
		</view>
		
		
	</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
	import {onMounted,ref,watch} from 'vue'
	import { fetchPendingEarn,fetchQWA } from '../../api/bank'
	
	const pe =ref(0)
	const token =ref('')
	const ktxAmount = ref(0)
	const fetchKtxAmount =async()=>{
		const res = await fetchQWA()
		ktxAmount.value = res.data.withdrawableAmount
		
	}
	const fetchPE = async()=>{
		const res = await fetchPendingEarn()
		pe.value = res.data.pendingEarnings
	}
	const toZuoye = () =>{
		 uni.navigateTo({ url: '/pages/zuoye/zuoye' })
	}
	const toGoodsManage = () =>{
		 uni.navigateTo({ url: '/pages/goodsManage/goodsManage' })
	}
	const toYxManage = () =>{
		 uni.navigateTo({ url: '/pages/yingxiaoManage/yingxiaoManage' })
	}
	// 客户管理
	const toCustomerManage = () =>{
		uni.navigateTo({ url: '/pages/customerManage/customerManage' })
	}
	//订单管理页面
	const toOrder = () =>{
		grantNotice()
        uni.switchTab({ url: '/pages/indexZuoye/indexZuoye' })
	}
	// 进入店铺管理
	const toXiaodian = () =>{
		uni.navigateTo({ url: '/pages/order/order' })
	}
	const toMyxiaodian = () =>{
		uni.navigateTo({ url: '/pages/myXiaodian/myXiaodian' })
	}
	
	const toMycard = () =>{
		uni.navigateTo({ url: '/pages/myCard/myCard' })
	}
	const toIndexhuiyuan = ()=>{
		uni.switchTab({ url: '/pages/indexHuiyuan/indexHuiyuan' })
	}
	const toMydata = ()=>{
		uni.navigateTo({ url: '/pages/myData/myData' })
	}
	const toTixian = ()=>{
		uni.navigateTo({ url: '/pages/tixian/tixian' })
	}
	// 请求授权订阅
	function grantNotice() {
	  wx.requestSubscribeMessage({
	    tmplIds: ['H4xFKkqy4JoDqSSUe9f8y1-qFBHqrtjwK8z55EBhywQ'],
	    success(res) {
	      if (res['H4xFKkqy4JoDqSSUe9f8y1-qFBHqrtjwK8z55EBhywQ'] === 'accept') {
	        console.log('商家已授权')
	        uni.setStorageSync('noticeGranted', true)
	      }
	    }
	  })
	}
	

onMounted(async()=>{
	token.value = wx.getStorageSync('token')  
	fetchPE()
	fetchKtxAmount()

})
// watch(token, newVal => {
//   if (newVal) {
// 	  console.log(123)
 
//   }
// }, { immediate: true }) 
	 
	
	
</script>

<style>
	.content{
		height:100vh;
		width:100%;
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.note-manage{
		display: flex;
		justify-content: space-between;
		width:90%;
		height:200rpx;
		margin-bottom: 40rpx;
	}
	.tools{
		display: flex;
		flex-direction: column;
		height:440rpx;
		width:90%;
		margin-bottom: 50rpx;
	}
	.data{
		display: flex;
		flex-direction: column;
		height:auto;
		width:88%;
		align-items: center;
	}
	.note{
		width:48%;
		height:200rpx;
		text-align: center;
	}
	.manage{
		width:48%;
		height:200rpx;
		text-align: center;
	}
		
	.tools-top,.tools-bottom{
		width:100%;
		height:200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}
	.top,.bottom{
		width:22%;
		height:200rpx;
		display: flex;
		
		flex-direction: column;
		align-items: center;
	}
	.top-img,.bottom-img{
		width:100%;
		height:78%;
		margin-bottom: 15rpx;
		border-radius: 10rpx;
	}
	/* .top-text,.bottom-text{
		font-weight: 550;
		font-size: large;
	} */
	.myzijin,.tixian,.card{
		display:flex;
		align-items: center;
		width: 100%;
		height:80rpx;
		border-bottom: solid 1rpx #f2f6ff ;
	}
	.icon-enter{
		height:50rpx;
		width:50rpx;
	}
	.icon-jine,.icon-card{
		height:50rpx;
		width:50rpx;
		margin-right: 10rpx;
	}
	.jine{
		display: flex;
		width:80%;
		justify-content: space-between;
		height:150rpx;
		margin-bottom: 50rpx;
		padding:10rpx 50rpx;
		
		
	}
	.jine-left,.jine-right{
		display: flex;
		flex-direction: column;
		width:auto;
		align-items: center;
		height:150rpx;
		justify-content: space-between;
		
	}
	.text{
		width:auto
	}
	.text2{
		flex:1;
		 text-align: right; 
	}
	.today-number2{
		line-height: 50rpx;
		font-size: x-large;
		margin-top: 15rpx;
		font-weight: 600;
	}
	.today-number{
		color:#aa0000;
		line-height: 50rpx;
		font-size: x-large;
		margin-top: 15rpx;
		font-weight: 600;
	}
	
	
	
	
	
</style>
